<template>
  <div>
    <v-header></v-header>
    <div class="resetPswd-content">
      <Card class="findPswd" dis-hover :bordered="false">
        <p slot="title" style="text-align: center;font-size: 20px">重置密码</p>
        <Form ref="mobileForm" :model="mobileForm" :rules="ruleMobileForm">
          <FormItem prop="mobile">
            <Input v-model="mobileForm.mobile" placeholder="请输入手机号">
            <Icon type="ios-person" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <FormItem prop="password">
            <Input type="password" v-model="mobileForm.password" placeholder="请输入密码">
            <Icon type="locked" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <FormItem prop="rePassword">
            <Input type="password" v-model="mobileForm.rePassword" placeholder="请再次输入密码（字母、数字、至少八位）" @on-enter="submit">
            <Icon type="locked" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <FormItem prop="validCode" inline>
            <Input v-model="mobileForm.validCode" placeholder="请输入验证码" style="width: 30%;"/>
            <Button :disabled="mobileBtnDisabled" @click="getValidatorCode" style="float:right;">{{mobileBtn}}
            </Button>
          </FormItem>
          <FormItem>
            <Button type="primary" :long="true" @click="handleResetPswd">确认</Button>
          </FormItem>
        </Form>
      </Card>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
  import auth from '@/utils/auth'
  import Model from '@/models/apps'
  import header from '@/components/header'
  import footer from '@/components/footer'
  export default {
    name: 'findPswd',
    components: {
      'v-header': header,
      'v-footer': footer
    },
    data () {
      const validateTel = (rule, value, callback) => {
        if (!(/^1[34578]\d{9}$/.test(value))) {
          callback(new Error('手机号码格式不正确'))
        } else {
          callback()
        }
      }
      const validatePassCheck = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.mobileForm.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      const validatePassWord = (rule, value, callback) => {
        if (!/^(?=.*\d.*)(?=.*[a-zA-Z].*).{8,}$/.test(value)) {
          callback(new Error('密码必须包含字母数字，且不少于8位!'))
        } else {
          callback()
        }
      }
      return {
        time: 60,
        mobileBtn: '获取短信验证码',
        mobileBtnDisabled: false,
        mobileForm: {
          mobile: '',
          password: '',
          rePassword: '',
          validCode: ''
        },
        ruleMobileForm: {
          mobile: [
            {
              required: true,
              message: '手机号不能为空'
            },
            {validator: validateTel, trigger: 'blur'}
          ],
          password: [
            {
              required: true,
              message: '密码不能为空'
            },
            {validator: validatePassWord, trigger: 'blur'}
          ],
          rePassword: [
            {
              required: true,
              message: '密码不能为空'
            },
            {validator: validatePassCheck, trigger: 'blur'},
            {validator: validatePassWord, trigger: 'blur'}
          ],
          validCode: [
            {
              required: true,
              message: '短信验证码不能为空'
            }
          ]
        }
      }
    },
    methods: {
      handleResetPswd () {
        this.$refs.mobileForm.validate((valid) => {
          if (valid) {
            new Model('resetPswd')
              .POST({
                params: {
                  ...this.mobileForm
                }
              })
              .then((res) => {
                if (res.data.errorCode === '200') {
                  this.$Message.success('密码重置成功！！！')
                  this.$router.push('/login')
                } else if (res.data.errorCode === '1004') {
                  this.$Message.error('该帐号还未注册！！！')
                } else {
                  this.$Message.error('未知异常，请重试！！！')
                }
              })
          }
        })
      },
      getValidatorCode () {
        var errorMsg
        this.$refs.mobileForm.validateField('mobile', function (message) {
          errorMsg = message
        })
        if (errorMsg.length !== 0) {
          return
        }
        new Model('sendValidCodeForFindPswd')
          .GET({
            params: {
              mobile: this.mobileForm.mobile
            }
          })
          .then((res) => {
            if (res.data.errorCode === '200') {
              this.send()
            } else if (res.data.errorCode === '2001') {
              this.$Message.error('该帐号还未注册！！！')
            } else {
              this.$Message.error('未知异常，请重试！！！')
            }
          })
      },
      send () {
        let me = this
        me.mobileBtnDisabled = true
        let interval = window.setInterval(function () {
          if ((--me.time) > 0) {
            me.mobileBtn = me.time + '秒后重新发送'
          } else {
            me.time = 60
            me.mobileBtnDisabled = false
            me.mobileBtn = '获取验证码'
            window.clearInterval(interval)
          }
        }, 1000)
      }
    }
  }
</script>

<style>
  .resetPswd-content {
    width: 340px;
    margin: 25px auto;
    margin-bottom: 50px;
  }
</style>
